<template>
  <footer class="footer">
    <!-- <span class="todo-count">剩余<strong>{{farr.length}}</strong></span> -->
    <!-- 计算属性的写法 -->
    <span class="todo-count">剩余<strong>{{count}}</strong></span>
    <ul class="filters" @click="fn">
      <li>
          <!-- 6.1谁应该有高亮的样式：动态class -->
          <!-- 6.2用户点击要切换isSel里保存的值 -->
        <a @click="isSel='all'" :class="{selected:isSel==='all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a @click="isSel='no'" :class="{selected:isSel==='no'}"  href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isSel='yes'" :class="{selected:isSel==='yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <!-- 7.0 注册点击事件 -->
    <button @click="clearFn" class="clear-completed" >清除已完成</button>
  </footer>
</template>

<script>
//5 统计剩余

export default {
    // 5.0 props
    props:["farr"],
    // 5.1 练习计算属性
    computed:{
        count(){
            return this.farr.length
        }
    },
    // 6,点谁谁亮
    data(){
        return {
            isSel:"all" //全完成all 已完成yes   未完成  no
        }
    },
    methods:{
        fn(){//6.3把类型字符串传给App.vue
            this.$emit("changeType",this.isSel)
        },
        clearFn(){
            // 7.1触发Ap.vue里事件对应clearFull方法
            this.$emit("clear")
        }
    }

}
</script>